<template>
  <el-dialog
      @close="$emit('update:visible', false)"
      class="moreUser"
      title="Customize your purchase plan"
      :visible.sync="dialogVisible"
      width="20%">
    <el-row class="moreUser-content">
      <el-col :span="24">Order Summary</el-col>
      <el-col :span="12">EXTRA USERS</el-col>
      <el-col :span="12" class="flex-end"><el-input-number :min="0" :step="1" :step-strictly="true" v-model="num" size="small"></el-input-number></el-col>
      <el-col :span="12">Extra Attendance only user <span v-if="false">Number of people who can use the Attendance App only at a cheaper price.</span></el-col>
      <el-col :span="12" class="flex-end"><el-input-number :min="0" :step="1" :step-strictly="true" v-model="att" size="small"></el-input-number></el-col>
      <span style="font-size: 12px">Number of people who can use the Attendance App only at a cheaper price</span>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <PayConsumer component="el-button"
                   size="mini"
                   class="w-full "
                   type="primary"
                   :edit="true"
                   :disabled="!$hasPermission('pay:payment') || (!num && !att)"
                   :before-payment="beforePayment"
                   :catch-error-payment="catchErrorPayment"
                   @success="success">
        {{$t('paywall.next')}}
      </PayConsumer>
    </span>
  </el-dialog>
</template>

<script>
import PayConsumer from '@/components/storybook/s-pay/pay-consumer'
export default {
  name: 'moreUser',
  props: ['visible', 'bundlesData', 'user', 'attendanceOnlyNumber', 'attendanceOnlyInfo'],
  components: {
    PayConsumer
  },
  data () {
    return {
      num: 1,
      att: 1,
      dialogVisible: false
    }
  },
  watch: {
    visible (val) {
      this.dialogVisible = val
    },
    bundlesData () {
      // PayContext.product = this.bundlesData
      // PayContext.subscriptionId = this.bundlesData.subscriptionId
      // PayContext.appId = this.bundlesData.appId
      // PayContext.payModal = 'pay'
    }
  },
  methods: {
    async catchErrorPayment (subscriptionId) {
    },
    async beforePayment () {
      const bundleExtraUsers = this._.find(this.bundlesData.subscriptionItem, function (item) {
        return item.item_type === 'addon' && item.item_price_id.indexOf('Attendance') === -1
      })
      const bundleOther = this._.find(this.bundlesData.subscriptionItem, { item_type: 'plan' })
      const pay = {
        subscriptionId: this.bundlesData.subscriptionId,
        bundleExtraUsersNumber: Number(this.user) + this.num,
        bundleExtraUsersId: bundleExtraUsers.item_price_id,
        bundleOtherId: bundleOther.item_price_id,
        addonsDtoList: [],
        planId: bundleOther.item_price_id
      }
      if (this.num) {
        pay.addonsDtoList.push({
          id: bundleExtraUsers.item_price_id,
          quantity: Number(this.user) + this.num
        })
      }
      if (this.att) {
        pay.addonsDtoList.push({
          id: this.attendanceOnlyInfo.description,
          quantity: this.attendanceOnlyNumber ? Number(this.attendanceOnlyNumber) + this.att : this.att
        })
      }
      return pay
    },
    async success () {
      const { sub } = this.$interface.pay
      const params = {
        subscriptionId: this.bundlesData.subscriptionId,
        appId: this.bundlesData.appId,
        usersLimit: Number(this.user) + this.num
      }
      if (this.att) {
        params.attendanceOnly = this.attendanceOnlyNumber ? Number(this.attendanceOnlyNumber) + this.att : this.att
      }

      let { data: response } = await sub(params)
      if (response.code !== 0) {
        throw response.msg
      }
      return response
    }
  }
}
</script>

<style scoped lang="scss">
.moreUser{
  &-content {
    .el-col {
      height: 40px;
      display: flex;
      align-items: center;
    }
    .flex-end {
      justify-content: flex-end;
    }
  }
  .el-input-number{
    line-height: 30px;
  }
}
</style>
